<template>
  <div class="page-main-box w-full h-full overflow-hidden box-border" ref="RefPageOut" :style="{ height: 'calc(100vh - 48px)' }">
    <HeaderBox :force-title="props.forceTitle" :before-back="props.beforeBack">
      <template #middle>
        <slot name="header" />
      </template>
    </HeaderBox>
    <div class="page-body-box w-full h-[calc(100%_-_64px)] overflow-hidden p-0 box-border">
      <slot name="body" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { watch, ref, onMounted, nextTick, computed } from 'vue';
// import type { PropType } from 'vue';
import HeaderBox from './HeaderBox.vue';

const props = defineProps({
  forceTitle: {
    type: String,
    default: ''
  },
  beforeBack: {
    type: Function,
    default: () => {
      return true
    }
  }
})
const RefPageOut = ref<HTMLDivElement>()

const height = computed(() => {
  const height = RefPageOut.value ? `${RefPageOut.value.clientHeight - 48}px` : 'auto'
  return height
})
</script>

<style lang="less" scoped>
.page-main-box{
  .page-body-box{
    // ..
  }
}
</style>
